<template>
	<div>
		<div class="div">
			<div class="block">
				<el-date-picker :editable="false" v-model="start" align="right" type="date" placeholder="选择起始日期"
					:picker-options="pickerOptions" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
				</el-date-picker>
			</div>
			<div class="block">
				<el-date-picker :editable="false" v-model="end" align="right" type="date" placeholder="选择终止日期"
					:picker-options="pickerOptions" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
				</el-date-picker>
			</div>
			<div class="div">
				<button class="button" type="primary" @click="handleClick" :disabled='show'>点击释放分红</button>
			</div>
		</div>
		<div class="div">
			<div class="block">
				<el-date-picker :editable="false" v-model="start1" align="right" type="date" placeholder="选择起始日期"
					:picker-options="pickerOptions1" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
				</el-date-picker>
			</div>
			<div class="block">
				<el-date-picker :editable="false" v-model="end1" align="right" type="date" placeholder="选择终止日期"
					:picker-options="pickerOptions1" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
				</el-date-picker>
			</div>
			<div class="div">
				<button class="button" type="primary" @click="handleClick1" :disabled='show1'>七彩宝贝</button>
			</div>
		</div>
	</div>
</template>

<script>
	import * as OrderApi from "@/api/Search";
	export default {
		data() {
			return {
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					}, {
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					}, {
						text: '半月前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 15);
							picker.$emit('pick', date);
						}
					}]
				},
				pickerOptions1: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					}, {
						text: '一月前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', date);
						}
					}]
				},
				start: '',
				end: '',
				show: false,
				start1: '',
				end1: '',
				show1: false,
			};
		},
		methods: {
			handleClick() {
				if (!this.start || !this.end) {
					this.$notify({
						title: "错误",
						message: "选择日期",
						type: "error",
					});
					return
				}
				this.show = true
				OrderApi.shifang({
					start: this.start,
					end: this.end,
				})
				setTimeout(() => {
					this.$notify({
						title: "成功",
						message: "成功",
						type: "success",
					});
				}, 500);
			},
			handleClick1() {
				if (!this.start1 || !this.end1) {
					this.$notify({
						title: "错误",
						message: "选择日期",
						type: "error",
					});
					return
				}
				this.show1 = true
				OrderApi.qicaibaobei({
					start: this.start1,
					end: this.end1,
				})
				setTimeout(() => {
					this.$notify({
						title: "成功",
						message: "成功",
						type: "success",
					});
				}, 500);
			}
		}
	};
</script>
<style lang="scss" scoped>
	.div {
		display: flex;
		padding: 30px;
	}

	.block {
		margin-left: 10px;
	}

	.button {
		display: inline-block;
		width: 130px;
		height: 50px;
		font-size: 16px;
		font-weight: 600;
		line-height: 50px;
		box-sizing: border-box;
		background-color: #88a58a;
		margin-top: -34px;
		border-radius: 10px;
		letter-spacing: 0.1em;
	}
</style>
